<template>
    <div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#ccc" show-indicators height="214">
            <van-swipe-item v-for="item in bannerList" :key="item.bannerId"  indicator-color="#39a9ed" @click="handleChangPage(item.actionData)">
              <img v-lazy="item.imgUrl" />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      bannerList: []
    }
  },
  mounted () {
    axios({
      url: 'https://m.maizuo.com/gateway?type=2&cityId=310100',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1614855755882276476911617","bc":"440100"}',
        'X-Host': 'mall.cfg.common-banner'
      }
    }).then(res => {
      this.bannerList = res.data.data
    })
  },
  methods: {
    handleChangPage (data) {
      var id = JSON.parse(data).businessId
      console.log(id)
      this.$router.push({ name: 'detial', params: { id: id } })
    }
  }
}
</script>
<style lang="scss" scoped>
  .my-swipe {
    .van-swipe-item {
    color: #fff;
    font-size: 20px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  }
</style>
